<template>
	<div class="app-container">
		<div class="details">
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>ID:</span>{{ detailsInfo.id }}</div>
					<div><span>剧源:</span>{{ detailsInfo.mfrTypeDesc }}</div>
					<div><span>备案号:</span>-</div>
					<div><span>剧目类型:</span>{{ detailsInfo.category }}</div>
					<div><span>上架状态:</span>{{ detailsInfo.publishStatusDesc }}</div>
					<div><span>调用类型:</span>{{ detailsInfo.sourceType == 'local' ? '本地' : 'API' }}</div>
				</div>

				<div class="dialogDom">
					<div><span>上架时间:</span>{{ detailsInfo.publishTime }}</div>
					<div><span>上架操作人:</span>-</div>
					<div><span>付费情况:</span>-</div>
					<div><span>付费开始集数:</span>{{ detailsInfo.epStartPay }}</div>
					<div><span>首发情况:</span>-</div>
				</div>
				<div class="dialogDom">
					<div><span>下架时间:</span>-</div>
					<div><span>最后操作人 :</span>-</div>
					<div><span>付费类型 :</span>{{ detailsInfo.payType }}</div>
					<div><span>付费金额 :</span>-</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>播放总量:</span>{{ detailsInfo.previewCount | 0 }}</div>
					<div><span>点赞:</span>{{ detailsInfo.likeCount }}</div>
					<div><span>收藏:</span>{{ detailsInfo.collectCount }}</div>
					<div><span>转发:</span>{{ detailsInfo.shareCount }}</div>
					<div><span>分享:</span>{{ detailsInfo.shareCount == null ? '0' : detailsInfo.shareCount }}</div>
					<div><span>举报:</span>{{ detailsInfo.reportCount == null ? '0' : detailsInfo.reportCount }}</div>
				</div>
				<div class="dialogDom">
					<div><span>广告展示次数:</span>-</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>剧目连接:</span>{{ detailsInfo.replyCount }}</div>
				</div>
				<div class="dialogDom">
					<div><span>集数:</span>{{ detailsInfo.epTotal }}</div>
				</div>
				<div class="">
					<div><span>剧目标签:</span> {{ detailsInfo.tags }}</div>
				</div>
				<div class="dialogDom">
					<div><span>剧目名称:</span> {{ detailsInfo.title }}</div>
				</div>
				<div class="dialogDom">
					<div class="imgPic">
						<span>封面:</span>
						<img :src="detailsInfo.imgPic" alt="" />
					</div>
				</div>
			</div>
			<div class="detailsDiv">
				<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="剧集" name="first">
						<div v-for="(item, index) in detailsInfo.imgPics" class="imgPics">
							<img :src="item" />
						</div>
						<div class="playInfo" v-for="(item, index) in countList" :key="'playerId' + item.epId"
							@click.capture="videoClick(item, index)">
							<video :src="item.playUrl" controls :id="'playerId' + item.epId" width="300" height="550"></video>
							<div class="playInfoDiv">
								<div>第{{ item.epNo }}集</div>
								<div>播放量：{{ item.previewCount }}</div>
								<div>付费状态：免费</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="剧情介绍" name="second">{{ detailsInfo.intro }}</el-tab-pane>
					<el-tab-pane label="演员表" name="third">暂无</el-tab-pane>
				</el-tabs>
				<el-pagination class="paginationdDom" background @size-change="handleSizeChange"
					@current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size"
					:layout="layout" :total="total">
				</el-pagination>
			</div>

			<div class="detailsDiv">
				<div><span>举报用户列表:</span></div>
				<el-table :data="tableData" border style="width: 100%" class="elTable">
					<!-- <el-table-column align="center" type="selection" width="40" /> -->
					<el-table-column label="序号" type="index" align="center" width="80"> </el-table-column>
					<el-table-column prop="reporterId" label="ID" />
					<el-table-column prop="reporterName" label="用户名称" />
					<el-table-column prop="reportTitle" label="举报内容标题" />
					<el-table-column prop="reportReason" label="举报原因描述" />
					<el-table-column prop="reportTime" label="举报时间" />
					<el-table-column prop="status" label="状态" width="120">
						<template #default="scope">
							{{ scope.row.status == 'pending' ? '待处理' : scope.row.status == 'resolved' ? '已处理' : '已拒绝' }}
						</template>
					</el-table-column>
				</el-table>
				<div class="dialog-footer" v-if="reportListType">
					<el-button type="primary" @click="dialogFormVisible = true">审核 </el-button>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogFormVisible" title="审核" width="500">
			<el-form :model="form">
				<el-form-item label="审核状态" :label-width="formLabelWidth">
					<el-select v-model="form.status" placeholder="全部状态">
						<el-option v-for="item in formAuditStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="风险等级" :label-width="formLabelWidth">
					<el-select v-model="form.riskLevel" placeholder="全部类型">
						<el-option v-for="item in ViolationLevel" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="审核结果" :label-width="formLabelWidth">
					<el-select v-model="form.resolution" placeholder="全部">
						<el-option v-for="item in auditResultList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="结果说明" :label-width="formLabelWidth">
					<el-input type="textarea" v-model="form.auditDesc" :rows="3" placeholder="请输入审核说明" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="reportBatchAudit()">确定 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { getDramaDetail, reportList, reportBatchAudit, getDramaEpisodeCountList } from '/@/api/admin/content';
import { useMessage } from '/@/hooks/message';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';
import moment from 'moment';
export default {
	name: 'Online',
	data() {
		return {
			layout: 'total, sizes, prev, pager, next, jumper',
			monitoringType: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'audit_label_pornography',
					label: '涉黄',
				},
				{
					value: 'audit_label_politics',
					label: '涉政',
				},
				{
					value: 'audit_label_drugs',
					label: '涉毒',
				},
				{
					value: 'audit_label_gambling',
					label: '涉赌',
				},
				{
					value: 'audit_label_religion',
					label: '宗教',
				},
				{
					value: 'audit_label_superstition',
					label: '迷信',
				},
				{
					value: 'audit_label_terrorism',
					label: '涉恐',
				},
				{
					value: 'audit_label_other',
					label: '其他',
				},
				{
					value: 'audit_label_none',
					label: '无风险',
				},
			],
			auditResultList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'pass',
					label: '无违法信息',
				},
				{
					value: 'illegal',
					label: '涉嫌违法信息',
				},
				{
					value: 'audit_result',
					label: '持续监控信息',
				},
			],
			ViolationLevel: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'high',
					label: '高风险',
				},
				{
					value: 'medium',
					label: '中风险',
				},
				{
					value: 'low',
					label: '低风险',
				},
				{
					value: 'none',
					label: '无风险',
				},
			],
			formAuditStatus: [
				{
					value: 'resolved',
					label: '已审核',
				},
				{
					value: 'rejected',
					label: '已拒绝',
				},
			],
			dialogFormVisible: false,
			outerVisible: false,
			activeName: 'first',
			options: [],
			tableData: [],
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			pageNum: 1,
			pageSize: 10,
			form: {},
			// 查询参数
			detailsInfo: {},
			queryParams: {
				current: 1,
				size: 10,
				dramaId: this.$route.query.id,
			},
			reportListType: false,
			playerInstances:[],
			player: null,
			countList: [],
			playerData: {
				licenseUrl: 'license/url', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
				videoType: 'VOD',
				src: '/',
			},
			playerId: '',
		};
	},

	created() {
		this.playerId = 'playerId' + this.$route.query.id;
	},
	mounted() {
		this.getDramaDetail();
	},

	methods: {
		formatTimestamp(timestamp) {
			return moment(timestamp).format('YYYY-MM-DD hh:ss:mm'); // 注意：同上，如果是秒则需要乘以1000
		},
		getDramaDetail() {
			let data = {
				id: this.$route.query.id,
				userId: this.$route.query.userId,
			};
			getDramaDetail(data).then((res) => {
				this.detailsInfo = res.data;
				this.getDramaEpisodeCountList();

				this.reportList();
			});
		},
		getDramaEpisodeCountList() {
			getDramaEpisodeCountList(this.queryParams).then((res) => {
				this.countList = res.data.records;
				this.total = res.data.total;
				this.playerInstances = [];
				for (let item of this.countList) {
					this.playerId = 'playerId' + item.epId;
					this.playerVideo(item);
				}
			});
		},
		playerVideo(item) {
			this.$nextTick(() => {
				if (!item.playUrl) {
					console.log(item.tcplayer.tcplayerSign);
					this.player = TCPlayer('playerId' + item.epId, {
						fileID: item.tcplayer.tcplayerFileId, // 请传入需要播放的视频 fileID（必须）
						appID: item.tcplayer.tcplayerAppId, // 请传入点播账号的 appID（必须）
						//必传 psign， psign 即播放器签名，签名介绍和生成方式参见链接：https://cloud.tencent.com/document/product/266/42436
						psign: item.tcplayer.tcplayerSign,
						licenseUrl: 'license/url',
					});
					this.playerInstances.push(this.player);
				} else {
					this.player = TCPlayer('playerId' + item.epId, this.playerData);
					this.player.src(item.playUrl); // url 播放地址
					this.playerInstances.push(this.player);
					// this.player.src('https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8'); // url 播放地址
				}
			});
		},
		videoClick(item, index) {
			for (let item of this.playerInstances) {
				item.pause();
			}
			this.playerInstances[index].play();
		},
		reportBatchAudit() {
			this.form.reportedPId = this.$route.query.id;
			reportBatchAudit(this.form).then((res) => {
				useMessage().success(res.msg);
				this.reportList();
				this.dialogFormVisible = false;
			});
		},
		reportList() {
			let data = {
				// id: this.$route.query.id,
				reportedPId: this.$route.query.id,
			};
			reportList(data).then((res) => {
				this.tableData = res.data.records;
				for (let item of this.tableData) {
					if (item.status == 'pending') {
						this.reportListType = true;
						return;
					} else {
						this.reportListType = false;
					}
				}
			});
		},
		disposePlayer() {
			if (this.playerInstances != {}) {
				console.log(this.playerInstances);
				for (let item of this.playerInstances) {
					item.dispose();
				}
			}
		},
		handleSizeChange(val) {
			this.player = null;
			this.queryParams.size = val;
			this.queryParams.current = 1; //调整每页数目时，重置当前页，避免当前显示在不存在的页数
			this.disposePlayer()
			this.getDramaEpisodeCountList(); //调接口，更新数据
		},
		// 更改当前页
		handleCurrentChange(val) {
			this.player = null;
			this.queryParams.current = val;
			this.disposePlayer()
			this.getDramaEpisodeCountList(); //调接口，更新数据
		},
	},
};
</script>
<style lang="scss" scoped>
.details {
	font-size: 14px;
	color: #666;
	width: 98%;
	margin: 1% auto;
}

.detailsDiv {
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 0.5%;
	padding: 10px 20px;
	background-color: #fff;
	font-size: 16px;
}

.dialogDom {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	margin: 15px 0;
	color: #999;
	flex-wrap: wrap;
	position: relative;

	span {
		color: #333;
		margin-right: 10px;
	}

	>div {
		width: 16%;
		min-width: 200px;
	}

	p {
		width: 90%;
	}
}

.dialogDiv {
	margin: 15px 0;
	color: #999;
	margin: 15px 0;
	color: #999;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	.dialogDivCon {
		width: 70%;

		a {
			text-decoration: underline;
		}
	}

	span {
		color: #333;
		margin-right: 10px;
	}
}

.imgPics {
	width: 18%;
	display: inline-block;
	margin: 1%;

	img {
		width: 100%;
		display: block;
	}
}

.playInfo {
	width: 300px;

	min-width: 300px;
	background-color: #f7f7f7;
	display: inline-block;
	margin: 10px;
	position: relative;

	.playInfoDiv {
		position: relative;
		bottom: 0;
		padding: 10px;
	}

	img {
		width: 100%;
		min-height: 200px;
	}
}

.dialog-footer {
	text-align: center;
}

.elTable {
	margin: 20px 0;
	margin-top: 10px;
}
</style>
